<!--主题回复 item -->
<template>
	<div class="reply-item">
		<div class="avatar">
			<img src="https://picsum.photos/400/400" alt=""/>
		</div>
		<div class="right">
			<div class="username">{{data.author.username}}</div>
			<div class="content">{{data.content}}</div>
			<div class="bar">
				<el-text class="bar-item">{{time}}</el-text>
				<el-text class="bar-item">
					👍{{data.like_count}}
				</el-text>
				<el-text class="bar-item" @click="openinput" v-if="isParent">回复</el-text>
			</div>
			<el-row :gutter="24" style="margin-top: 14px;" v-if="showInput">
				<el-col :span="20">
					<el-input :placeholder="`回复: ${data.author.username}`" v-model="reviewForm.content"/>
				</el-col>
				<el-col :span="2">
					<el-button type="primary" @click="reply">发送</el-button>
				</el-col>
			</el-row>
			<div>
				<ReplieItem v-for="item in data.child_replies" :data="item" :is-parent="false" :topic_id="topic_id"/>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import {defineProps, defineEmits, computed} from 'vue'
import dayjs from 'dayjs'
import {useUserConfig} from '/@/stores/UserInfoConfig'
import {useMessage} from '/@/hooks/message'
import {topic_replies} from '/@/api/forum'
const stores = useUserConfig()


const emits = defineEmits(['reloadReply'])
const showInput = ref(false)
const openinput = () => {
	showInput.value = !showInput.value
}

//发表回复的参数
const reviewForm = ref({
	content: '',
	topic: '',
	author: '',
	parent: '',
})

//发起回复
const reply = async ()=> {
	if(reviewForm.value.content === ''){
		useMessage().error('回复不能为空!')
		return;
	}else {
		reviewForm.value.topic = props.topic_id
		reviewForm.value.author = stores.userInfo.id
		reviewForm.value.parent = props.data.id
		const res = await topic_replies(reviewForm.value)
		reviewForm.value.content = ''
		reviewForm.value.parent = ''
		showInput.value = false
		emits('reloadReply')
	}
}

const props = defineProps({
	data: {
		type: Object,
		default: () => ({})
	},
	isParent: {
		type: Boolean,
		default: true
	},
	topic_id: {
		type: Number,
		default: 0
	}
})
const time = computed(()=> {
	return dayjs(props.data.created_at).format('YYYY-MM-DD HH:mm:ss')
})


</script>
<style scoped lang="scss">
.reply-item{
	display: flex;
	align-items: flex-start;
	margin-top: 20px;
	width: 100%;
	box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
	padding: 20px;
	border-radius: 10px;
	&:hover{
		box-shadow: 4px 2px 4px 2px rgba(0, 0, 0, 0.2);
	}
	.avatar{
		width: 60px;
		height: 60px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 14px;
		img{
			width: 100%;
			height: 100%;
		}
	}

	.right{
		flex: 1;
		.username{
			margin-bottom: 8px;
		}
		.content{
			font-size: 16px;
			color: #606266;
		}
		.bar{
			margin-top: 14px;
			color: #999;
			.bar-item{
				margin-right: 16px;
				&:not(:first-child){
					cursor: pointer;
				}
			}
		}
	}
}
</style>
